<template>
  <div id="contain" class="raiders_wrap">
    <div class="searchBox">
      <input type="text" class="inp" v-model="keyWord" />
      <span class="sp" @click="goSearch"><i class="el-icon-search"></i></span>
    </div>
    <div v-if="noInfo">
      <div v-show="noInfo">
        <div class="noSearchDiv">{{ noInfo }}</div>
      </div>
    </div>
    <div v-else>
      <div
           v-for="(item, index) in list"
           :key="index"
           class="box1"
           @click="goRaiderDetail(item.strategyId)"
      >
        <img :src="item.pics" alt="" style="width:400px;height:250px" />
        <div>
          <p style="margin: 10px 20px; font-size: x-large">{{ item.title }}</p>
          <div style="margin:50px 20px">{{ item.content }}</div>
        </div>
      </div>
      <el-pagination
          hide-on-single-page
          :total="totalCount"
          layout="prev, pager, next"
          :current-page="currentPage"
          :page-size="5"
          @current-change="changePage"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [],
      currentPage: 1,
      keyWord: "",
      totalCount: 0,
      noInfo: ""
    };
  },
  mounted() {
    this.getData();
  },
  methods: {
    getData() {
      this.$axios
        .post("/static/strategy/list", {
          page: this.currentPage,
          limit: 5,
          keyword: this.keyWord,
        })
        .then((res) => {
          if (res.data.code === 0) {
            if (res.data.page.regard[0]) {
              this.list = res.data.page.regard;
              this.totalCount = res.data.page.totalCount;
              this.noInfo = ""
            } else {
              this.noInfo = "没有找到相关信息"
            }
          }
        });
    },
    changePage(val) {
      this.currentPage = val;
      this.list = [];
      this.getData();
    },
    goSearch() {
      this.currentPage = 1;
      this.list = [];
      this.getData();
    },
    goRaiderDetail(strategyId) {
      this.$router.push({
        path: "/raider",
        query: {
          strategyId,
        },
      });
    },
  },
};
</script>
<style scoped>
.raiders_wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.box1 {
  width: 100%;
  display: flex;
  align-items: center;
  margin: 20px 0;
}
.searchBox {
  width: 800px;
  height: 70px;
  margin: 4px auto;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.inp {
  display: inline-block;
  width: 720px;
  height: 60px;
  border-radius: 5px;
  font-size: 18px;
  padding-left: 10px;
  border: 2px solid #ff9d00;
  -webkit-appearance: none;
  -moz-appearance: none;
  outline: 0;
}
.sp {
  display: inline-block;
  width: 60px;
  height: 60px;
  background-color: #ff9d00;
  border-radius: 10%;
  text-align: center;
}
.el-icon-search {
  font-size: 30px;
  color: white;
  text-align: center;
  line-height: 60px;
}
</style>
